<template>
    <div class="box">
        <div class="management">
            <div class="shangpin" @click="shang()">
                <img src="https://cdn3.axureshop.com/demo/1525603/images/%E9%A6%96%E9%A1%B5/u1105.png" />
                <span>商品管理</span>
            </div>
            <div class="caiwu" @click="caiwu()">
                <img src="https://cdn3.axureshop.com/demo/1525603/images/%E9%A6%96%E9%A1%B5/u1108.png" />
                <span>财务管理</span>
            </div>
            <div class="pingjia" @click="pingjia()">
                <img src="https://cdn3.axureshop.com/demo/1525603/images/%E9%A6%96%E9%A1%B5/u1111.png" />
                <span>评价管理</span>
            </div>
            <div class="团购" @click="tuangou()">
                <img src="https://cdn3.axureshop.com/demo/1525603/images/%E9%A6%96%E9%A1%B5/u1143.png" />
                <span>团购优惠</span>
            </div>
        </div>
        <div class="data p-1">
            <div class="datahead">
                <div class="jingying">经营数据</div>
                <div @click="gengduo()">
                    更多
                    <van-icon name="arrow" />
                </div>
            </div>
            <div class="databox">
                <div class="dingdan">
                    <div class="jinri">今日订单量</div>
                    <div class="jinri-money">{{ data.todaorder }}</div>
                    <div class="zuori">昨日</div>
                    <div class="zuori-money">{{ data.yesterdayorder }}</div>
                </div>
                <div class="yingye">
                    <div class="jinri">今日营业额</div>
                    <div class="jinri-money">{{ data.todaturnover }}</div>
                    <div class="zuori">昨日</div>
                    <div class="zuori-money">{{ data.yesterdayturnoverr }}</div>
                </div>
                <div class="danjia">
                    <div class="jinri">今日客单价</div>
                    <div class="jinri-money">{{ data.todaprice }}</div>
                    <div class="zuori">昨日</div>
                    <div class="zuori-money">{{ data.yesterdayprice }}</div>
                </div>
            </div>
        </div>
        <div class="activity p-1">
            <div class="activity-head">
                <div>营销活动</div>
            </div>
            <div class="activity-box">
                <div class="activity-box-box" @click="ke()">
                    <div>可报名</div>
                    <div>{{ data.ke }}</div>
                </div>
                <div class="activity-box-box" @click="yi()">
                    <div>已报名</div>
                    <div>{{ data.yi }}</div>
                </div>
                <div class="activity-box-box" @click="zi()">
                    <div>自建</div>
                    <div>{{ data.zi }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'HomeBox',
    data() {
        return {
            data: {
                todaorder: 1000,
                yesterdayorder: 999,
                todaturnover: 998,
                yesterdayturnoverr: 999,
                todaprice: 998,
                yesterdayprice: 999,
                ke: 6,
                yi: 5,
                zi: 4
            }
        }
    },
    methods: {
        caiwu() {
            this.$router.push('/financialview')
        },
        tuangou() {
            this.$router.push('/GroupBuy')
        },
        pingjia() {
            this.$router.push('/CustomerReply')
        },
        gengduo() {
            this.$router.push('/businessdata')
        },
        ke() {
            this.$router.push('/okavi')
        },
        yi() {
            this.$router.push('/okavi4')
        },
        zi() {
            this.$router.push('/okavi6')
        },
        shang() {
            this.$router.push('/CommodityMan')
        }
    }
}
</script>
<style scoped>
* {
    font-size: 15px;
}
.management {
    display: flex;
    width: 100%;
    height: 125px;
    justify-content: space-around;
    margin: 10px 0;
    background-color: #ffffff;
}
.management > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.management > div > img {
    width: 70px;
    height: 70px;
    margin: 10px 0;
}
.data {
    background-color: #ffffff;
}
.datahead {
    display: flex;
    height: 40px;
    justify-content: space-between;
    margin: 10px;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
}
.datahead > div {
    margin: 0 5px;
}
.databox {
    display: flex;
    justify-content: space-around;
}
.jinri {
    text-align: center;
    font-size: 15px;
}
.jinri-money {
    text-align: center;
    font-size: 18px;
    color: #cc0000;
    margin: 5px 0 15px 0;
}

.zuori {
    text-align: center;
    font-size: 15px;
    margin: 5px 0;
}
.zuori-money {
    text-align: center;
    font-size: 16px;
}
.activity {
    margin: 10px 0 60px 0;
    background-color: #ffffff;
}
.activity-head {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
}
.activity-head > div {
    margin: 0 15px;
}
.activity-box {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.activity-box-box {
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.box {
    background-color: #f5f5f5;
}
</style>
